// 过渡效果的偏移量（像素）
const SHIFT = 160;

// 过渡效果基类：实现画面切换的滑动效果
class Transition extends Entity {
    // 构造函数：初始化过渡效果
    // @param fromX: 起始X坐标
    // @param toX: 目标X坐标
    constructor(fromX, toX) {
        super();
        this.fromX = fromX;
        this.toX = toX;
    }

    // 更新过渡状态
    // @param elapsed: 距离上一帧的时间间隔
    cycle(elapsed) {
        super.cycle(elapsed);

        // 淡出效果完成后移除实体
        if (this.age > 0.3 && this.direction < 0) this.world.remove(this);
    }

    // 渲染过渡效果
    // @param camera: 当前相机实体
    render(camera) {
        // 设置渲染位置（相对于相机）
        ctx.translate(~~camera.x - CANVAS_WIDTH / 2, ~~camera.y - CANVAS_HEIGHT / 2);

        // 计算并应用过渡动画位置
        ctx.translate(interpolate(
            this.fromX,
            this.toX,
            this.age / 0.3  // 0.3秒完成过渡
        ), 0);

        // 绘制过渡效果形状（斜边黑色遮罩）
        ctx.fillStyle = '#000';
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.lineTo(CANVAS_WIDTH + SHIFT, 0);
        ctx.lineTo(CANVAS_WIDTH, CANVAS_HEIGHT);
        ctx.lineTo(-SHIFT, CANVAS_HEIGHT);
        ctx.fill();
    }
}

// 淡入效果：从右向左滑入
class TransitionIn extends Transition {
    constructor() {
        super(0, CANVAS_WIDTH + SHIFT);  // 从屏幕右侧滑入
    }
}

// 淡出效果：从左向右滑出
class TransitionOut extends Transition {
    constructor() {
        super(-CANVAS_WIDTH - SHIFT, 0);  // 向屏幕右侧滑出
    }
}
